<section class="container" id="home">
  <app-breadcrumb></app-breadcrumb>
  <h2>{{ title }}</h2>
  <div class="header-row row">
    <h4 class="col-md-3">Search by...</h4>
    <span class="col-md-4 d-none d-md-block"></span>
    <h4 class="col-md-5 d-none d-md-block">What this search type does</h4>
  </div>

  <form [formGroup]="fg" *ngIf="credentialTypeOptions$ | async as options">
    <app-advanced-search-row [label]="searchOptions[0].label" [helper]="searchOptions[0].helper">
      <input class="form-control" formControlName="text">
    </app-advanced-search-row>
    <app-advanced-search-row [label]="searchOptions[1].label" [helper]="searchOptions[1].helper">
      <app-select formControlName="type" [options]="options" [selected]="credentialTypeSelected"></app-select>
    </app-advanced-search-row>
    <app-advanced-search-row [label]="searchOptions[2].label" [helper]="searchOptions[2].helper">
      <app-select formControlName="archived" [options]="yesNoOptions" [selected]="yesNoSelected"></app-select>
    </app-advanced-search-row>
    <button type="submit" class="btn btn-primary mt-2" (click)="submit()">
      Advanced Search
    </button>
  </form>
</section>

<section class="container" *ngIf="(fg.touched || fg.dirty) && blankQuery">
  <div class="row mt-4 mt-md-5">
    <div class="col-md-8 col-lg-9 rows">
      <div class="alert alert-info">{{ 'search.advanced-prompt' | translate }}</div>
    </div>
  </div>
</section>

<section class="container" *ngIf="credentials$ | async as result">
  <app-search-result-list [result]="result" [filters]="filters" (nav)="onNav($event)"></app-search-result-list>
</section>